import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/*
* class Scaffold extends StatefulWidget {
  /// Creates a visual scaffold for material design widgets.
  const Scaffold({
    Key key,
    this.appBar, //通常显示在应用程序顶部的水平条
    this.body, // 当前界面所显示的主要内容。
    this.floatingActionButton, //悬浮按钮，右下角按钮
    this.floatingActionButtonLocation,//悬浮按钮位置
    this.floatingActionButtonAnimator, //悬浮按钮在[floatingActionButtonLocation]出现/消失动画
    this.persistentFooterButtons,//在底部呈现一组button，显示于[bottomNavigationBar]之上，[body]之下
    this.drawer,//一个垂直面板，显示于左侧，初始处于隐藏状态，“抽屉”菜单效果
    this.endDrawer,
    this.bottomNavigationBar,//出现于底部的一系列水平按钮，实现底部类似tabBar效果
    this.bottomSheet,//底部持久化提示框
    this.backgroundColor,//内容背景颜色
    this.resizeToAvoidBottomPadding,//弃用，使用[resizeToAvoidBottomInset] 控制界面内容body是否重新布局来避免底部被覆盖，比如当键盘显示时，重新布局避免被键盘盖住内容。默认值为true
    this.resizeToAvoidBottomInset,//重新计算布局空间大小
    this.primary = true,//是否填充顶部（状态栏）
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
    this.drawerEnableOpenDragGesture = true,
    this.endDrawerEnableOpenDragGesture = true,
  }) : assert(primary != null),
       assert(extendBody != null),
       assert(extendBodyBehindAppBar != null),
       assert(drawerDragStartBehavior != null),
       super(key: key);
* */
class ScaffoldDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ScaffoldDemoState();
}

class ScaffoldDemoState extends State<ScaffoldDemo> {
  // 也可通过Builder来获取Scaffold的State
  final _scaffoldkey = new GlobalKey<ScaffoldState>();
  int _tabIndex = 0;
  var appBarTitle = ['劳务服务', '我的'];
  var tabimages;
  var pageList;

  void initData() {
    /**
     * 初始化选中和未选中的icon
     */
    tabimages = [
      [getTabImage('images/index_01.png'), getTabImage('images/index_02.png')],
      [getTabImage('images/mine_01.png'), getTabImage('images/mine_02.png')],
    ];
  }

  Image getTabImage(path) {
    return Image.asset(path, width: 20, height: 20);
  }

  Image getTabIcon(int curindex) {
    if (curindex == _tabIndex) {
      return tabimages[curindex][1];
    } else {
      return tabimages[curindex][0];
    }
  }

  String getTabTitle(int curindex) {
    if (_tabIndex == curindex) {
      return appBarTitle[curindex];
    } else {
      return appBarTitle[curindex];
    }
  }

  @override
  Widget build(BuildContext context) {
    initData();
    return Scaffold(
      key: _scaffoldkey,
      //设置标题栏的背景颜色
      // backgroundColor: Colors.white,
      //标题居中
      appBar: AppBar(
        backgroundColor: Colors.yellow,
        title: Text(
          'Scaffold',
          style: TextStyle(fontSize: 20, color: Colors.black),
        ),
        elevation: 0.0,
        //设置标题阴影高度  不需要的话设置为0.0
        centerTitle: true,
        leading: Builder(
          builder: (BuildContext context) {
            //设置事件
            return GestureDetector(
              //设置左边的图标
              child: Icon(
                //设置图标内容
                Icons.keyboard_arrow_left,
                color: Colors.black,
                size: 30,
              ),
              onTap: () {
                Navigator.of(context).pop();
              },
            );
          },
        ),
        //设置状态栏的字体颜色
        brightness: Brightness.dark,
        //是否设置内容避开状态栏
        primary: true,
        //右侧按钮
        actions: <Widget>[
          Padding(
            child: IconButton(
              icon: Icon(Icons.menu),
              color: Colors.black,
              onPressed: () {
                _scaffoldkey.currentState!.openDrawer();
              },
            ),
            padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
          ),
        ],
      ),
      //悬浮按钮
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.yellow,
        child: Icon(
          Icons.add,
          size: 30,
          color: Colors.white,
        ),
        onPressed: () => null,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      //抽屉
      drawer: DrawerPerson(),
      //底部导航栏
      bottomNavigationBar: BottomNavigationBar(
        //选中位置
        currentIndex: _tabIndex,
        //选中色
        fixedColor: Color(0xFF5C8BFA),
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: getTabIcon(0), label: getTabTitle(0)),
          BottomNavigationBarItem(icon: getTabIcon(1), label: getTabTitle(1)),
        ],
        onTap: (index) {
          setState(() {
            _tabIndex = index;
          });
        },
      ),
      body: Center(child: Text(getTabTitle(_tabIndex))),
    );
  }
}

///个人信息侧滑页面
class DrawerPerson extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          Container(
            padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
            height: 150,
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  //头像、用户名放在一个row里面  否则用户名将居中
                  Row(
                    children: <Widget>[
                      Container(
                        height: 60,
                        width: 60,
                        padding: EdgeInsets.only(right: 10),
                        child: CircleAvatar(
                          backgroundImage: NetworkImage(
                              'http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg'),
                        ),
                      ),
                      Text(
                        '文阿花',
                        style: TextStyle(
                            fontSize: 15,
                            color: Colors.black,
                            fontWeight: FontWeight.bold),
                      ),
                    ],
                  ),
                  Center(
                    child: InkWell(
                      onTap: () {},
                      child: Container(
                        height: 30,
                        padding:
                            EdgeInsets.symmetric(horizontal: 8, vertical: 3),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          color: Colors.white,
                          border: Border.all(color: Colors.pink),
                        ),
                        child: Text(
                          '编辑资料',
                          style: TextStyle(fontSize: 15, color: Colors.pink),
                        ),
                      ),
                    ),
                  ),
                ]),
          ),
          ListTile(
            title: Text(
              '设置',
              style: TextStyle(fontSize: 15, color: Colors.black),
            ),
            leading: CircleAvatar(child: Icon(Icons.settings)),
          ),
          //分割线
          Divider(
            //分割线高度（效果是距离上面的距离）
            height: 0.5,
            color: Colors.grey[300],
            //左边距
            indent: 15,
            //右边距
            endIndent: 15,
            thickness: 0.5, //厚度（线条粗）
          ),
          ListTile(
            title: Text(
              '购物车',
              style: TextStyle(color: Colors.black),
            ),
            leading: CircleAvatar(
              child: Icon(Icons.shopping_bag),
            ),
          ),
          Divider(
            height: 0.5,
            color: Colors.grey[300],
            indent: 15,
            endIndent: 15,
            thickness: 0.5,
          ),
          ListTile(
            title: Text(
              '我的订单',
              style: TextStyle(color: Colors.black),
            ),
            leading: CircleAvatar(
              child: Icon(Icons.reorder),
            ),
          ),
          Divider(
            height: 0.5,
            color: Colors.grey[300],
            indent: 15,
            endIndent: 15,
            thickness: 0.5,
          ),
        ],
      ),
    );
  }
}
